<template>
    <div
        class="cashInstApplyList"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="现金分期申请记录查询">
            <template slot="cardBody">
                <div class="headerBox">
                    <!-- 搜索表单模块 -->
                    <el-form
                        class="searchForm"
                        ref="searchForm"
                        :inline="true"
                        label-position="right"
                        size="small"
                        label-width="100px"
                    >
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                    <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" class="buttonBox">
                                <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-search"
                                    @click="handleSearch"
                                >查 询</el-button>
                                <!-- <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="handleReset" :loading="resetLoading">重 置</el-button> -->
                            </el-col>
                        </el-row>
                    </el-form>
                </div>

                <!-- 表格数据展示模块 -->
                <el-table :data="tableData" stripe border class="heard-bg business_table">
                    <el-table-column
                        v-for="(item, index) in tableColumn"
                        :key="index"
                        :label="item.label"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="item.value === 'INPDATE' || item.value === 'MATCHDAY' || item.value === 'AUTHDAY'"
                            >{{ scope.row[item.value] | getFomatDate }}</span>
                            <span
                                v-else-if="item.value === 'STATUS'"
                            >{{ scope.row.STATUS | getText(statusList) }}</span>
                            <span
                                v-else-if="item.value === 'INPSRC'"
                            >{{ scope.row.INPSRC | getText(INPSRCLIST) }}</span>
                            <span v-else>{{ scope.row[item.value] }}</span>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="footer">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('pre')"
                        :disabled="currentApprefIndex <= 0"
                    >上一页</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleChangePage('next')"
                        :disabled="!nextButtonFlag"
                    >下一页</el-button>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'cashInstApplyList',
    components: {
        cardComponent,
    },
    data() {
        return {
            statusList: [], // 状态列表
            INPSRCLIST: [], // 申请来源 列表
            pageLoading: false, // 页面loading
            apprefList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentApprefIndex: '', // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            tableColumn: [
                {
                    label: '分期付款申请编号',
                    value: 'APPREF',
                },
                {
                    label: '申请录入日期',
                    value: 'INPDATE',
                },
                {
                    label: '商户编号',
                    value: 'MERCHANT',
                },
                {
                    label: '商品编号',
                    value: 'PRPRDID',
                },
                {
                    label: '商品名称',
                    value: 'PRONAME',
                },
                {
                    label: '商品金额',
                    value: 'MPAMT',
                },
                {
                    label: '分期期数',
                    value: 'NBRMTHS',
                },
                {
                    label: '状态',
                    value: 'STATUS',
                },
                {
                    label: '申请来源',
                    value: 'INPSRC',
                },
                {
                    label: '授权日期',
                    value: 'AUTHDAY',
                },
                {
                    label: '请款日期',
                    value: 'MATCHDAY',
                },
                {
                    label: '商户编号',
                    value: 'MERCHANT',
                },
            ],
            tableData: [], // 表格数据
        };
    },
    filters: {
        // 状态转译
        getText(val, list) {
            let text = '';
            list.forEach((item) => {
                if (item.code.trim() === val.trim()) {
                    text = item.label;
                }
            });
            return text;
        },

        // 日期格式转换
        getFomatDate(val) {
            const time = val.trim();
            if (time) {
                return moment(`${time}`).format('YYYY-MM-DD');
            }
            return '';
        },
    },

    created() { },

    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    mounted() {
        this.init();
    },
    methods: {

        async init() {
            // 状态转译列表
            this.statusList = await getDictSelectList('MPAPPSTATUS', this);

            //  申请来源 转译列表
            this.INPSRCLIST = await getDictSelectList('INPSRC', this);

            // 获取初始化数据
            this.getListData();
        },

        // 获取列表数据
        getListData() {
            this.pageLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.pinFlag, // 是否检查密码标志
                // PIN: '123456', // 密码
                RTNIND: this.apprefList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                APPREF: this.apprefList.length === 0 ? '' : this.apprefList[this.currentApprefIndex], // 首次查询上送空；下翻页查询时 上送最后一条记录中的分期付款申请编号；
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '3046';
            params.body.appBody = appBody;

            // 跑 3046 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '响应数据 -- 3046');
                    if (result.sysHead.rspCd === '000000') { // 判断交易是否成功
                        this.tableData = result.body.appBody.dataList || [];
                        // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                        const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].APPREF;
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 10);
                        if (!this.apprefList.includes(currentAppref)) {
                            this.apprefList.push(currentAppref);
                            // 保存 当前页最后一条记录的申请编号的索引
                            this.currentApprefIndex = this.apprefList.length - 1;
                        } else { // 已存在
                            this.apprefList.forEach((item, index) => {
                                if (item === currentAppref) {
                                    this.currentApprefIndex = index;
                                }
                            });
                        }
                        // console.log(result.body.appBody, 111111)
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$message.error('网络请求失败!');
                }
            });
        },

        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.apprefList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.getListData();
            } else { // 切换到下一页
                this.getListData();
            }
        },

        // 点击查询
        handleSearch() {
            this.apprefList = [];
            this.getListData();
        },
    },
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.cashInstApplyList {
    .buttonBox {
        text-align: right;
    }

    .footer {
        margin: 30px;
        text-align: right;
    }
}
</style>
